<template>
	<view class="main">
		<!-- 官方榜 -->
		<view class="officialList">
			<view class="officialList_title"><text>官方榜</text></view>
			<view class="officialList_wrap" v-for="(item, index) in officialList" :key="index" @click="goPlayList(item.id)">
				<view class="officialList_img">
					<image mode="widthFix" :src="item.coverImgUrl" />
					<view class="officialList_info">
						<view class="officialList_wrap">
							<text>{{ item.updateFrequency }}</text>
						</view>
					</view>
				</view>
				<view class="officialList_desc">
					<view class="" v-for="(item2, index2) in item.tracks" :key="index2">
						<text>{{ index2 + 1 }}.{{ item2.first }}-{{ item2.second }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 推荐榜 -->
		<view class="officialList">
			<view class="officialList_title"><text>推荐榜</text></view>
			<view class="recommendationList_wrap">
				<view class="recommendationList_item" v-for="(item, index) in recommendationList" :key="index" @click="goPlayList(item.id)">
					<view class="recommendationList_img">
						<image mode="widthFix" :src="item.coverImgUrl" />
						<view class="recommendationList_info">
							<!-- 播放量 -->
							<view>
								<text>{{ item.updateFrequency }}</text>
							</view>
						</view>
					</view>
					<!-- 标题 -->
					<view class="recommendationList_titles">{{ item.name }}</view>
				</view>
			</view>
		</view>
		<!-- 全球榜 -->
		<view class="officialList">
			<view class="officialList_title"><text>全球榜</text></view>
			<view class="recommendationList_wrap">
				<view class="recommendationList_item" v-for="(item, index) in globalList" :key="index" @click="goPlayList(item.id)">
					<view class="recommendationList_img">
						<image mode="widthFix" :src="item.coverImgUrl" />
						<view class="recommendationList_info">
							<!-- 播放量 -->
							<view>
								<text>{{ item.updateFrequency }}</text>
							</view>
						</view>
					</view>
					<!-- 标题 -->
					<view class="recommendationList_titles">{{ item.name }}</view>
				</view>
			</view>
		</view>
		<!-- 更多榜单 -->
		<view class="officialList">
			<view class="officialList_title"><text>更多榜单</text></view>
			<view class="recommendationList_wrap">
				<view class="recommendationList_item" v-for="(item, index) in moreList" :key="index" @click="goPlayList(item.id)">
					<view class="recommendationList_img">
						<image mode="widthFix" :src="item.coverImgUrl" />
						<view class="recommendationList_info">
							<!-- 播放量 -->
							<view>
								<text>{{ item.updateFrequency }}</text>
							</view>
						</view>
					</view>
					<!-- 标题 -->
					<view class="recommendationList_titles">{{ item.name }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { rankingList } from '../../api/ranking.js';
export default {
	data() {
		return {
			// 官方榜
			officialList: [],
			// 推荐榜
			recommendationList: [],
			// 全球榜
			globalList: [],
			// 更多榜单
			moreList: []
		};
	},
	onLoad() {
		this.getlist();
	},
	methods: {
		async getlist() {
			let result = await rankingList({
				url: '/toplist/detail'
			});
			var list = result[1].data.list;
			var officialList = [];
			var recommendationList = [];
			var globalList = [];
			var moreList = [];
			for (var index in list) {
				var name = list[index].name;
				if (name == '云音乐飙升榜' || name == '云音乐新歌榜' || name == '网易原创歌曲榜' || name == '云音乐热歌榜') {
					officialList.push(list[index]);
				} else if (
					name == '江小白YOLO云音乐说唱榜' ||
					name == '说唱TOP榜' ||
					name == '云音乐电音榜' ||
					name == '云音乐ACG音乐榜' ||
					name == '云音乐欧美新歌榜' ||
					name == '抖音排行榜'
				) {
					recommendationList.push(list[index]);
				} else if (
					name == '美国Billboard周榜' ||
					name == 'UK排行榜周榜' ||
					name == 'Beatport全球电子舞曲榜' ||
					name == '日本Oricon周榜' ||
					name == 'iTunes榜' ||
					name == '香港电台中文歌曲龙虎榜'
				) {
					globalList.push(list[index]);
				} else {
					moreList.push(list[index]);
				}
			}
			this.officialList = officialList;
			this.recommendationList = recommendationList;
			this.globalList = globalList;
			this.moreList = moreList;
		},
		goPlayList(id) {
			uni.navigateTo({
				url: '/pages/playlist/playlist?id=' + id
			});
		},
	}
};
</script>

<style lang="scss" scoped>
image{
	height:auto;
}
.officialList {
	margin-left: 30rpx;
}

.officialList_title {
	margin-top: 30rpx;
	margin-bottom: 20rpx;
}

.officialList_title text {
	font-size: 35rpx;
	font-weight: 600;
}

.officialList_wrap {
	display: flex;
	align-items: center;
}

.officialList_img {
	width: 30%;
	margin-bottom: 20rpx;
	position: relative;
}

.officialList_img image {
	width: 100%;
	border-radius: 15rpx;
}

.officialList_img .officialList_info {
	position: absolute;
	left: 10rpx;
	bottom: 20rpx;
	width: 100%;
	color: #fff;
	font-size: 24rpx;
}

.officialList_desc {
	width: 63%;
	margin-left: 20rpx;
	line-height: 70rpx;
	margin-bottom: 40rpx;
}

.officialList_desc text {
	font-size: 30rpx;
	color: rgb(99, 97, 95);
	display: -webkit-box;
	overflow: hidden;
	white-space: normal;
	text-overflow: ellipsis;
	word-wrap: break-word;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

/* 推荐榜 */

.recommendationList_wrap {
	display: flex;
	flex-wrap: wrap;
}

.recommendationList_item {
	width: 30%;
	margin-bottom: 20rpx;
	margin-right: 20rpx;
}

.recommendationList_img {
	position: relative;
}

.recommendationList_img image {
	width: 100%;
	border-radius: 15rpx;
}

.recommendationList_img .recommendationList_info {
	position: absolute;
	left: 10rpx;
	bottom: 20rpx;
	width: 100%;
	color: #fff;
	font-size: 24rpx;
}

.recommendationList_titles {
	font-size: 28rpx;
	display: -webkit-box;
	overflow: hidden;
	white-space: normal;
	text-overflow: ellipsis;
	word-wrap: break-word;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
</style>
